<template>
  <div
    class="main"
    style="width:1000px;margin:auto"
  >
    <div class="search-input">
      <el-input
        v-model="keyWord"
        placeholder="请输入溯源货物ID"
      ></el-input>
      <i class="el-icon-search"></i>
    </div>
    <div
      class="content"
      v-for="(s, index) in sourceData"
      :key="index"
    >
      <el-descriptions
        class="margin-top"
        title="货物溯源信息"
        :column="3"
        :size="size"
        border
      >

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-check"></i>
            商品ID
          </template>
          {{s.goodsId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-shopping-cart-2"></i>
            商品名
          </template>
          {{s.goodsName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-price-tag"></i>
            价格
          </template>
          &yen;{{s.price}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            备注
          </template>
          <el-tag size="small">经手次数:{{s.number}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            生产商地址
          </template>
          {{s.address}}
        </el-descriptions-item>
      </el-descriptions>
      <div
        class="block"
        style="margin-top:40px"
      >
        <el-timeline>
          <el-timeline-item
            v-for="(value,index) of s.traceTimeStamp.length"
            :timestamp="s.traceTimeStamp[index]"
            :key="index"
            placement="top"
          >
            <el-card>
              <h4>{{s.traceName[index]}}</h4>
              <p>{{s.traceAddress[index]}}</p>
            </el-card>
          </el-timeline-item>

        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "market",
  data() {
    return {
      keyWord: "",
      sourceData: [
        {
          goodsId: "12",
          goodsName: "爱了吗vv包包",
          price: "12",
          number: "3",
          address: "望子成龙小区翻斗大花园",
          traceAddress: ['0x1289121', '0x121211n2', '0x1281921'],
          traceName: ['zhansan','lisi','wanwu'],
          traceTimeStamp: ['2022-11-01', '2022-11-02', '2022-11-31'],
        },
      ],
      size: "",
    };
  },
};
</script>

<style>
.search-input {
  position: relative;
  width: 600px;
  margin: auto;
}
.search-input .el-input input {
  border-radius: 20px;
  width: 600px;
}
.search-input .el-icon-search {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 20px;
  transition: all 0.5s;
}
.search-input .el-icon-search:hover {
  color: #409eff;
}
</style>